<template>
  <div class="login-container">
    <h1>东软环保公众监督平台</h1>
    <h4>-----网格员端-----</h4>
    <el-card class="login-card">
      <LoginForm />
    </el-card>
  </div>
</template>

<script setup>
import LoginForm from '@/components/gridor/GLoginForm.vue'
</script>

<style scoped>
.login-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-image: url('@/assets/images/nepgLogin.jpg');
  background-size: cover;
}

.login-card {
  width: 300px;
  padding: 20px;
  background-color: rgba(21, 25, 232, 0.75);
  backdrop-filter: blur(1px) saturate(0);
  border-radius: 10px;
}
h1,
h4 {
  color: #1f11e2;
}
</style>
